<script setup lang="ts" name="viewArt">
import { onMounted, onUnmounted } from 'vue'
import ArtContent from '@/components/index/artical/artContent.vue'
import useArtView from '@/components/index/artical/hooks/artView'
const {
  articleId,
  thisArt,
  footer,
  articleComments,
  getComments,
  goBack,
  getThisArt,
  starAtical,
  ArtComments,
  ArtCommentSend
} = useArtView()
getThisArt(articleId)

let observer: IntersectionObserver | null = null
onMounted(async () => {
  if (articleId) {
    observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            // 在这里添加你想在元素出现在视口时执行的代码
            getComments(articleId)
          }
        })
      },
      {
        threshold: 0.2 // 元素至少50%可见时触发回调
      }
    )

    if (footer.value) {
      observer.observe(footer.value)
    }
  }
})
onUnmounted(() => {
  if (observer && footer.value) {
    observer.unobserve(footer.value)
  }
})
</script>

<template>
  <div id="artshow">
    <header>
      <h2>{{ thisArt.title }}</h2>
      <hr />
      <p id="art-msg">
        <span
          ><router-link to="">{{ '专栏：' + thisArt.id }}</router-link></span
        >
        <span>{{ '时间：' + thisArt.time }}</span>
        <span
          ><router-link to="">{{ '作者：' + thisArt.authorName }}</router-link></span
        >
      </p>
      <hr />
      <span class="like" @click="starAtical">
        <StarFilled class="svg" v-if="thisArt.isHeart" />
        <Star class="svg" v-else />
      </span>
      <router-link to="" @click="goBack"
        ><span class="close"><Close class="svg" /></span
      ></router-link>
    </header>
    <main>
      <!--  -->
      <ArtContent :content="thisArt.content" />
    </main>
    <aside></aside>
    <footer ref="footer">
      <div class="title">
        <b>评论</b>
        <div>
          <span>最新</span>
          <span>|</span>
          <span>最热</span>
        </div>
        <component :is="ArtCommentSend"></component>
        <component :is="ArtComments" :comments="articleComments"></component>
      </div>
    </footer>
  </div>
</template>

<style scoped lang="less">
* {
  color: var(--color3);
}
hr {
  opacity: 0.6;
}

.svg {
  width: 28px;
  height: 28px;
}

.like:hover {
  background-color: var(--color3);
  .svg {
    color: var(--color2);
  }
}
.like {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 40px;
  width: 32px;
  height: 32px;
  background-color: var(--color2);
  border-radius: var(--radius);
  padding: 2px;
  box-sizing: border-box;
}
.close:hover {
  background-color: var(--color3);
  .svg {
    color: var(--color2);
  }
}
.close {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  background-color: var(--color2);
  border-radius: var(--radius);
  padding: 2px;
  box-sizing: border-box;
}
#artshow {
  position: relative;
  border: 2px dashed var(--color5);
}
header {
  text-align: center;
  h2 {
    margin: 6px 0;
  }
  #art-msg {
    margin: 2px 0;
    display: flex;
    justify-content: space-around;

    font-weight: normal;
  }
}
main {
  min-height: 600px;
  p:nth-child(1) {
    margin-top: 6px;
  }
  .paragraph {
    text-indent: 2em;
    margin: 10px 6px;
    font-size: 18px;
  }
  .paragraph::before {
    content: '';
  }
}

footer {
  margin-top: 400px;
  > .title {
    border-top: 2px dashed var(--color2);

    > b {
      display: inline-block;
      font-size: 24px;
      margin: 10px;
      vertical-align: middle;
    }
    > div {
      display: inline-block;
      vertical-align: middle;
      margin: 20px;
      > span {
        cursor: pointer;
        margin: 0 6px;
      }
    }
  }
}
</style>
